<template>
  <div class="">
    <div v-if="data">
      <div class="store-detail-pic">
        <img :src="data.detail.store_banner" class="banner-pic" mode="scaleToFill" />
      </div>
      <div class="store">
        <div class="store-pic">
          <img :src="data.detail.store_logo" alt="">
        </div>
        <div class="store-info">
          <div class="store-name">
            <div class="store-title">
              <p>{{data.detail.store_name}}</p>
              <img src="../../../static/images/icon-renzheng.png" alt="">
              <img src="../../../static/images/icon-zhizhao.png" alt="">
            </div>
            <div class="store-collection" v-if="!data.detail.is_collect" @click.stop="storeCollect()">
              <div class="store-collection-controller">
                <i-icon type="collection" size="16" />
              </div>
              <span>收藏店铺</span>
            </div>
            <div class="store-collection" v-if="data.detail.is_collect" @click.stop="cancelStoreCollect()">
              <div class="store-collection-controller">
                <i-icon type="collection_fill" size="16" />
              </div>
              <span>取消收藏</span>
            </div>
          </div>
          <div class="store-rate">
            <i-rate count="5" size="16" :value="data.detail.store_credit">{{data.detail.store_credit}}.0</i-rate>
          </div>
          <div class="store-tags">
            <div class="store-tag" v-for="(item,index) in tagList" :key="index">{{item}}</div>
          </div>
        </div>
      </div>
      <div class="store-prots">
        <div class="store-prots-cell">
          <div class="store-prots-hd">
            <i-icon type="coordinates" size="14" />
          </div>
          <div class="store-prots-bd">
            <p>{{data.detail.address}}</p>
            <p class="additional">距离{{distance}}km</p>
          </div>
          <div class="store-prots-ft">
            <i-icon type="mobilephone" @click="makePhoneCall(data.detail.store_phone)" size="20" color="#ee7559" />
          </div>
        </div>
        <div class="store-prots-cell">
          <div class="store-prots-hd">
            <i-icon type="time" size="14" />
          </div>
          <div class="store-prots-bd">
            <p>营业时间：{{data.detail.store_workingtime}}</p>
          </div>
        </div>
      </div>
      <div class="store-coupons-list">
        <ant-store-coupons v-for="(item,index) in data.coupons" :key="index" :data="item" @click="handlerCoupons"></ant-store-coupons>
      </div>
      <div class="store-hot">
        <i-cell-group>
          <i-cell title="店铺热销" value="全部商品" clickable is-link @click="changeGoods" />
        </i-cell-group>
        <div class="store-hot-bd">
          <div class="product-hot-list">
            <ant-store-info-product v-for="(item,index) in data.hotGoods" :key="index" :data="item"></ant-store-info-product>
          </div>
        </div>
      </div>
      <van-tabs :active="active" :change="onChange">
        <van-tab title="商家详情">
          <div class="store-info-content">
            <!-- {{data.detail.store_detail}} -->
            <img mode="widthFix" :src="item" v-for="(item,index) in content" :key="index" alt="">
          </div>
        </van-tab>
        <van-tab title="用户评价">
          <ant-store-comments v-for="(item,index) in data.comments" :key="index" :data="item"></ant-store-comments>
        </van-tab>
      </van-tabs>
    </div>
   
    <i-toast id="toast" />
    <i-action-sheet :visible="shopSheetCisible" :actions="shopSheet" show-cancel @cancel="shopSheetCancel" @iclick="shopSheetClick" />
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "Vuex";
  // 依赖
  const {
    $Toast
  } = require('@/../static/iview/base/index');
  import request from "@/api/request";
  import AntStoreCoupons from '@/components/storeCoupons'
  import AntStoreInfoProduct from '@/components/storeInfoProduct'
  import AntStoreComments from '@/components/storeComments'
  export default {
    props: ['changeGoods', 'data', 'cancelStoreCollect', 'storeCollect', 'content', 'tagList'],
    components: {
      AntStoreCoupons,
      AntStoreInfoProduct,
      AntStoreComments,
    },
    data() {
      return {
        active: 0,
        distance: (this.data.detail.distance / 1000).toFixed(2)
      };
    },
    computed: {
      ...mapState(['locationInfo'])
    },
    methods: {
      onChange(e) {
        this.active = e.mp.detail.index
      },
      makePhoneCall(phone) {
        wx.makePhoneCall({
          phoneNumber: phone,
        })
      },
      handlerCoupons(e) {
        this.$handlerCoupons(e)
      }
    },
    mounted() {},
  };

</script>

<style lang="less">
  .store-detail-container {
  }

  .store-detail-pic {
    width: 100%;
    height: 125px;
    background: #F9F9F9;

    img {
      width: 100%;
      height: 125px;
      display: block;
    }
  }


  .store-prots {
    border-top: 1px solid #F9F9F9;
    padding: 0 0 12px;
    background: #fff;

    .store-prots-cell {
      display: flex;
      align-items: flex-start;
      padding: 12px 15px 0;

      .store-prots-hd {
        font-size: 0;
        padding-top: 2px;
        margin-right: 12px;
      }

      .store-prots-bd {
        flex: 1;
        font-size: 12px;
        color: rgba(64, 64, 64, 1);
        line-height: 18px;
      }

      .additional {
        color: #A0A0A0;
      }

      .store-prots-ft {
        height: 20px;
        font-size: 0;
        border-left: 1px solid #EAEAEA;
        padding: 0 5px 0 20px;
      }
    }

  }

  .store-coupons-list {
    background: #fff;
    overflow-x: auto;
    white-space: nowrap;
    padding-left: 15px;
    margin-bottom: 10px;
    height: 80px;
  }

  .store-collection {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    span {
      color: #333333;
      margin-right: 5px;
    }

    .store-collection-controller {}
  }

  .store-info-content {
    font-size: 0;

    img {
      width: 100%;
      display: block;
    }
  }

</style>
